<template>
  <div class="main">
    <section>
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search" />
      <el-button type="primary" @click="$router.push({name:'goodsMiddleStage-tagsAdd'})">新建标签</el-button>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="标签id" width="180">
        </el-table-column>
        <el-table-column prop="name" label="标签名称" width="180">
        </el-table-column>
        <el-table-column prop="description" label="图片" width="180">
          <template slot-scope="scope">
            <img style="width:80px; heigth:80px" :src="scope.row.pic" />
          </template>
        </el-table-column>
        <el-table-column prop="enableStatus" label="状态">
          <span slot-scope="scope">
            {{scope.row.enableStatus === 0 ? '未启用' : '启用'}}
          </span>
        </el-table-column>
        <el-table-column prop="updatedAt" label="修改时间">
          <span slot-scope="scope">{{scope.row.updatedAt | formatDateTime}}</span>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="$router.push({path:'/goodsMiddleStage/tagsEdit', query:{...scope.row}})">编辑</el-button>
            <el-button type="success" @click="$router.push({path: '/goodsMiddleStage/goodBindTag', query:{...scope.row}})" plain>商品管理</el-button>
            <el-button type="danger" plain @click="deleteComfir(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10, 20, 50, 100, 200]" :page-size="listQuery.pageSize" background layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>

<script>
import { searchTag, deleteTag } from '@/api/goodMiddleStage'
import SearchForm from '@/components/searchForm'
import mixins from '../mixins'
export default {
  name: 'goodsMiddleStage-tags',
  mixins: [mixins],
  components: {
    SearchForm
  },
  data() {
    return {
      listQuery: {
        enableStatus: '',
        name: '',
        pageIndex: 0,
        pageSize: 0,
        queryType: 3
      },
      queryConfig: [
        {
          prop: 'name',
          type: 'input',
          label: '标签名称'
        },
        {
          prop: 'enableStatus',
          type: 'select',
          label: '状态',
          data: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '启用',
              value: 1
            },
            {
              label: '未启用',
              value: 0
            }
          ]
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const { data } = await searchTag(this.listQuery)
        this.list = data.data
        this.listTotal = data.total
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    async deleteComfir(val) {
      try {
        await this.$confirm('是否要删除当前品牌', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this._deleteTag(val)
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    async _deleteTag(val) {
      try {
        const { data, message } = await deleteTag({ id: val.id })
        if (message === 'SUCCESS') {
          this.$message.success('操作成功')
          this.getList()
        }
      } catch (error) {
        this.$message.success('操作失败')
        console.log(error)
      }
    }
  }
}
</script>

<style>
</style>